<template>
  <div class="app-tasklist-toolbar">
    <v-autocomplete
      v-model="values"
      :items="items"
      outlined
      dense
      chips
      small-chips
      :label="caption"
      :multiple="whethermultiple == 'true'"
      color="#44acb6"
      item-text="label"
      item-value="value"
      clearable
      @focus="getData()"
      hide-no-data
    >
      <template v-slot:selection="data">
        <v-chip>
          <v-list-item-avatar :color="$util.getColorByPersonName(data.item.label?data.item.label:data.item.value)" size="4" v-if="name != 'n_pri_in'"
            ><span style="color:white;font-size:1px;">{{
              data.item.label
                ? data.item.label.substr(data.item.label.length - 1)
                : data.item.value.substr(data.item.value.length - 1)
            }}</span></v-list-item-avatar
          >
          {{ data.item.label ? data.item.label : data.item.value }}
        </v-chip>
      </template>
    </v-autocomplete>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Model,
  Emit,
  Watch,
  Provide,
} from "vue-property-decorator";

import "./app-vuetify-autocompletes.less";
import ProjectService from "@/service/project/project-service";
import CodeListService from "@/codelist/codelist-service";
import { Subject, Subscription } from "rxjs";
import ProjectTeamServiceBase from "@service/project-team/project-team-service-base";

@Component({})
export default class AppVuetifyAutocompletes extends Vue {
  /**
   * 代码表标识
   *
   * @type {any}
   * @memberof AppVuetifyAutocompletes
   */
  @Prop() public codelistname: any;

  /**
   * 代码表类型
   *
   * @type {any}
   * @memberof AppVuetifyAutocompletes
   */
  @Prop() public codelisttype: any;
  /**
   * 数据项
   *
   * @type {any}
   * @memberof AppVuetifyAutocompletes
   */
  public items: any = [];

  /**
   * 数据值
   *
   * @type {any}
   * @memberof AppVuetifyAutocompletes
   */
  public values: any = [];

  @Prop() public whethermultiple: any;

  /**
   * 代码表服务对象
   *
   * @type {CodeListService}
   * @memberof AppVuetifyAutocompletes
   */

  public codeListService: CodeListService = new CodeListService({
    $store: this.$store,
  });

  /**
   * 项目团队对象
   *
   * @type {ProjectTeamServiceBase}
   * @memberof AppVuetifyAutocompletes
   */
  public projectTeamServiceBase: ProjectTeamServiceBase = new ProjectTeamServiceBase();

  /**
   * name
   *
   * @type {any}
   * @memberof AppVuetifyAutocompletes
   */
  @Prop() public name: any;

  @Watch("values")
  valuesnew(newval: any, val: any) {
    this.$emit("onformitemvaluechange", {
      value: newval.toString().replace(new RegExp(",", "g"), ";"),
      name: this.name,
    });
  }

  /**
   * value
   *
   * @type {any}
   * @memberof AppVuetifyAutocompletes
   */
  @Prop() public value: any;

  @Watch("value")
  newvalue(newval:any,val:any){
    if(!newval)
    this.values = [];
  }

  /**
   * 表单项标签
   *
   * @type {any}
   * @memberof AppVuetifyAutocompletes
   */
  @Prop() public caption: any;

  /**
   * 应用上下文
   *
   * @type {any}
   * @memberof AppVuetifyAutocompletes
   */
  @Prop() public context: any;

  /**
   * 视图通讯对象
   *
   * @type {Subject<ViewState>}
   * @memberof AppVuetifyAutocompletes
   */
  @Prop() public viewState!: Subject<ViewState>;

  /**
   * 用户列表数据集
   *
   * @type {any}
   * @memberof AppVuetifyAutocompletes
   */
  public userslist: any;

  /**
   * 视图状态事件
   *
   * @public
   * @type {(Subscription | undefined)}
   * @memberof AppVuetifyAutocompletes
   */
  public viewStateEvent: Subscription | undefined;

  /**
   *分页对象
   *
   *@memberof AppVuetifyAutocompletes
   */
  private page: any = {
    size: 1000,
    page: 0,
  };

  /**
   * Vue声明周期，组件创建完毕
   *
   * @memberof AppVuetifyAutocompletes
   */
  public created() {}

  /**
   * 获取下拉数据
   *
   * @memberof AppVuetifyAutocompletes
   */
  public getData() {
    this.loadData();
  }

  /**
   * 加载数据
   *
   * @memberof AppVuetifyAutocompletes
   */
  public loadData() {
    if (this.items.length > 0) {
      return;
    }
    let dectionary: any = "";
    let params: any = {};
    if (Object.is(this.codelisttype, "dynamic")) {
      //动态代码表
      this.getCodeList();
    } else {
      //静态代码表
      const codelist = this.$store.getters.getCodeList(this.codelistname);
      if (codelist) {
        let items: Array<any> = [...JSON.parse(JSON.stringify(codelist.items))];
        this.items = items;
      } else {
        console.log(`----${dectionary}----代码表不存在`);
      }
    }
  }

  /**
   * 获取动态代码表UserRealName
   *
   * @memberof AppProjectinfoHeader
   */
  public async getCodeList() {
    this.userslist = [];
    let codeList: any = this.codeListService.getItems(this.codelistname);
    await codeList
      .then((items: any) => {
        if (items && items.length > 0) {
          //this.userslist.push(...items);
          this.userslist = items;
        }
      })
      .catch((error: any) => {
        console.log(error);
      });
    await this.getTaskTeam();
  }

  /**
   * 获取项目团队成员清单
   *
   * @memberof AppProjectinfoHeader
   */
  public async getTaskTeam() {
    let context: any = {};
    let params: any = {
      srfparentdename: "Project",
      srfparentkey: this.context.project,
      project: this.context.project,
      multiple: 0,
      n_root_eq: this.context.project,
    };

    Object.assign(params, this.page);
    await this.projectTeamServiceBase
      .FetchDefault(context, params, true)
      .then((response: any) => {
        if (response && response.status === 200) {
          if (response.data) {
            this.items = [];
            for (let i = 0; i < response.data.length; i++) {
              let account = response.data[i].account;
              let realname = response.data[i].account;
              let commiter = response.data[i].commiter;
              this.userslist.forEach((useritme: any) => {
                if (Object.is(useritme.value, account)) {
                  realname = useritme.label;
                }
              });
              let member: any = {
                value: account,
                label: realname,
                commiter: commiter,
              };

              this.items.push(member);
            }
          }
        }
      })
      .catch((e: any) => {
        if (e && e.status === 500) {
          const url: any = "/500";
          this.$router.push({ path: url });
        } else {
          this.$Notice.error({
            title: "错误",
            desc: e.data.message,
          });
        }
      });
  }
}
</script>
